<template>
  <div class="video-item" @click.stop="toPlay()">
    <!-- 老规矩左边图片 -->
    <div class="coverPhoto">
      <img :src="src?baseUrl+src:'../img/gan.png'" alt="视频封面">
    </div>
    <!-- 右边描述 -->
    <div class="desc">
      <p class="title">{{title}}</p>
      <p class="author">up: {{up}}</p>
      <p class="detail">{{myDetail}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "video-item",
  props: ["src", "title", "play", "up", "time", "id", "detail"],
  data: function() {
    return {
      baseUrl:this.GLOBAL.baseFilePath,
    };
  },
  created: function() {
    /* this.detail = this.detail ? this.detail : ""; */
  },
  methods: {
    toPlay() {
      let routeData = this.$router.resolve({
        name: "play",
        query: { id: this.id }
      });
      window.open(routeData.href, "_blank");
    },
    
  },
  computed:{
    myDetail:function(){
     var temp = this.detail
     if(this.detail)
     return this.detail.length>120?temp.substring(0,120)+'......':this.detail
     else
     return ''
    }
  }
};
</script>

<style lang="scss" scoped>
.coverPhoto {
  height: 100px;
  width: 100px;
  margin: 4px 20px 2px 5px;
  border-radius: 5px;
  overflow: hidden;
}
img {
  height: 100%;
  width: 100%;
}
.video-item {
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  cursor: pointer;
  &:hover {
    background: #f4f4f5;
  }
  .desc {
    color: #909399;
    p {
      margin: 5px 0;
    }
    .title {
      font-weight: bold;
      font-size: 16px;
      color: rgb(139, 139, 253);
    }
    .detail {
      width: 600px;
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>